<!-- 图书目录 -->
<template>
	<scroll-view class="pointslist" scroll-y="true">
		<view class="container">
			<u-collapse :item-style="itemStyle" >
				<u-collapse-item :title="item.key"  v-for="(item, index) in itemList" :key="index" :open="open">
					<view v-for="(val,index) in item.data" :key="index" :class="val.author ? 'menu':'menu_color'" @click="getMenu(val.book_id,val.article_id)">
						<view class="menu_text" v-html="val.title"></view>
						<!-- <view class="menu_title">{{val.author}}</view> -->
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
	</scroll-view>
</template>

<script>
	import { getbookcata } from '../../api/home.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				bookId:'',
				itemStyle: {
					margin: '10px 0',
					// 'border-bottom': '2px solid #eee'
				},
				open:true,
				itemList: [],
			}
		},
		mounted() {
			this.bookId = this.$Route.query.bookId
			var parem = {
				book_id:this.bookId
			}
			getbookcata(parem).then(res =>{
				this.itemList = res.data
			})
		},
		methods: {
			getMenu(data,val){
				this.$Router.push({name: 'bookRead',params: {bookId: data,articleId:val,title:this.$Route.query.title}})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.pointslist{background: #FFFFFF;width: 100%;height:calc(100vh - 1rpx);}
	.container{
		padding: 0 15px;
	}
	.menu{
		display: flex;
		flex-direction: column;
		padding: 27upx 0 27upx 0;
		// padding: 22upx 0 30upx 0;
		line-height: 1.6rem;
		width: 100%;
		border-bottom: 3upx solid #eee;
	}
	.menu_color{
		display: flex;
		flex-direction: column;
		padding: 27upx 0 27upx 0;
		// padding: 22upx 0 34upx 0;
		width: 100%;
		border-bottom: 3upx solid #eee;
	}
	.menu_text{
		font-family: 'PingFangSC-Regular', 'Source Han Sans CN' !important;
		font-size: 0.9rem;
		color: #333333;
		overflow: hidden;
		-webkit-line-clamp:1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		width: 90%;
	}
	.menu_title{
		font-family: 'PingFangSC-Regular', 'Source Han Sans CN' !important;
		font-size: 0.9rem;
		color: #999999;
		overflow: hidden;
		-webkit-line-clamp:1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
</style>
